<template>
	<view class="cons_con">
		<!-- <view class="conscon1">
			<u-sticky>
				<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="currentTab"
					@click=" tabClick"></u-tabs>
			</u-sticky>
		</view> -->
		<view class="add_list">
			<image class="add_li_img" :src="po55" mode=""></image>
			<!-- <view class="add_li_right" v-for="(item,index) in list3" :key="index" :class="{ resize: index === gjindex }" @click="loucheng(item,index)">
				{{item.name}}
			</view> -->
		</view>
		<view class="conscon2">
			<u-sticky>
				<u-tabs :list="list2" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="current_Tab"
					@click=" tab_Click"></u-tabs>
			</u-sticky>
		</view>
		<view class="box_1">
			<!-- <view class="box_4">
				<view class="image-text_1">
					<view class="section_1"></view>
					<text lines="1" class="text-group_1">运动记录</text>
				</view>
			</view> -->
			<view class="list_1" v-if="trafficlist !=''">
				<view class="list-items_1-0" v-for="(item,index) in trafficlist" :key='index' @click="sports_data">
					<view class="image-text_2-0">
						<image :src="po69" class="image_3-0"></image>
						<text lines="1" class="text-group_2-0">{{item.station_name}}</text>
					</view>
					<view class="image-text_2-1">
						<!-- <text lines="1" class="text_3-0">2024/04/31</text> -->
						<text lines="1" class="text_4-0">直线距离{{item.station_distance}}米</text>
					</view>
				</view>
			</view>
			<view class="group_9" v-else>
				<u-empty text="暂无交通指导" icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
			</view>
		</view>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				po69: this.$https.assetsPath + 'po69.png',
				po55: '',
				list1: [],
				list2: [],
				currentTab: 0,
				current_Tab: 0,
				gjindex: 0,
				list3: [],
				venues_id: '',
				trafficlist: [],
				sport_traffic_facility_id: ''
			};
		},
		onLoad(options) {
			this.venues_id = options.venues_id
			this.traffic()
		},
		onShow() {

		},
		methods: {
			// 获取分类商品
			async traffic() {
				let data = {
					project_id: getApp().globalData.projectId,
					venue_id: this.venues_id,
					output: 'json'
				}
				let result = await subscribe.traffic(data)
				if (result.code == 1) {
					this.list2 = result.data
					this.po55 = result.data[0].image_url
					this.sport_traffic_facility_id = result.data[0].id
					this.trafficStation()
				}
			},
			loucheng(item, index) {
				this.gjindex = index
			},
			tabClick(item) {
				this.currentTab = item.index;
			},
			async trafficStation(item) {
				let data = {
					project_id: getApp().globalData.projectId,
					venue_id: this.venues_id,
					sport_traffic_facility_id: this.sport_traffic_facility_id,
					output: 'json'
				}
				let result = await subscribe.trafficStation(data)
				if (result.code == 1) {
					this.trafficlist = result.data
					// this.po55 = item.image
				}
			},
			async tab_Click(item) {
				let that = this
				that.po55 = item.image_url
				that.po69 = item.traffic_logo_url
				this.current_Tab = item.index;
				let data = {
					project_id: getApp().globalData.projectId,
					venue_id: this.venues_id,
					sport_traffic_facility_id: item.id,
					output: 'json'
				}
				let result = await subscribe.trafficStation(data)
				if (result.code == 1) {
					that.trafficlist = result.data
					// result.data.forEach((item, index) => {
					// 	if (item.type == 1) {
					// 		that.msg.url = item.visitCard.image_url
					// 	} else if (item.type == 2) {
					// 		that.po40 = item.visitCard.image_url
					// 	} else if (item.type == 3) {
					// 		that.chname = item.visitCard.name
					// 		that.icon1 = item.visitCard.image_url
					// 	}
					// })
				}
			},
		}
	};
</script>

<style lang="less" scoped>
	.cons_con {
		.add_list {
			position: relative;
			width: 710rpx;
			height: 620rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 620rpx;
				margin: 0 auto;
			}

			.add_li_right {
				position: absolute;
				z-index: 9;
				right: 20rpx;
				width: 62rpx;
				height: 62rpx;
				border: 1rpx #b1b1b1 solid;
				top: 180rpx;
				background-color: #fff;
				line-height: 62rpx;
				text-align: center;
				margin-top: 62rpx;
			}

			.resize {
				color: #4BA677;
			}

			/* 根据索引值设置不同的垂直偏移 */
			.add_li_right:nth-child(1) {
				top: 30rpx;
			}

			.add_li_right:nth-child(2) {
				top: 60rpx;
				/* 根据需求调整偏移量 */
			}

			.add_li_right:nth-child(3) {
				top: 120rpx;
				/* 根据需求调整偏移量 */
			}
		}

		.conscon1 {
			padding: 0 0 20rpx 0;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		.conscon2 {
			padding: 20rpx 80rpx;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		.box_1 {
			// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
			background-color: rgba(255, 255, 255, 1.0);
			display: flex;
			flex-direction: column;
			padding: 29rpx 12rpx 18rpx 20rpx;
		}

		.box_4 {
			background-color: rgba(255, 255, 255, 1.0);
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			padding: 0 0 20rpx 0;
		}

		.image-text_1 {
			width: 128rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.section_1 {
			background-color: rgba(75, 166, 119, 1.0);
			border-radius: 12rpx;
			width: 6rpx;
			height: 24rpx;
			display: flex;
			flex-direction: column;
			margin: 8rpx 0 8rpx 0;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: #333333;
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
		}

		.list_1 {
			// height: 960rpx;
			margin-right: 8rpx;
			display: flex;
			flex-direction: column;
		}

		.list-items_1-0 {
			width: 710rpx;
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			padding: 35rpx 30rpx 35rpx 30rpx;
			background: #F4F9F9;
			border-radius: 20rpx;
			align-items: center;
		}

		.image-text_2-0 {
			// width: 330rpx;
			flex-direction: row;
			display: flex;
			align-items: center;
		}

		.image-text_2-1 {
			flex-direction: row;
			display: flex;
			align-items: center;
		}

		.image_3-0 {
			width: 72rpx;
			height: 72rpx;
		}

		.text-group_2-0 {
			width: 320rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			// line-height: 24rpx;
			margin-left: 15rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.text_3-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
		}

		.text_4-0 {
			width: 220rpx;
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 37rpx;
			margin: 0 0 0 20rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.text_5 {
			overflow-wrap: break-word;
			color: rgba(114, 158, 135, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 24rpx;
		}
	}
</style>